import Nav from './nav'
import Logo from './logo'
import Link from 'next/link'

export default () => (
  <header>
    <div className="left">
      <Link href="/">
        <a>
          <span className="logo">
            <Logo />
          </span>
          <span className="title">Hacker Next</span>
        </a>
      </Link>
      <div className="nav">
        <Nav />
      </div>
    </div>
    <div className="right">
      <Link href="/login">
        <a className="login">login</a>
      </Link>
    </div>

    <style jsx>{`
      header {
        background: #ffa52a;
        display: flex;
        font-size: 14px;
      }

      .logo {
        margin: 4px 5px 2px 4px;
        display: inline-block;
      }

      .left {
        flex: 9;
      }

      .right {
        flex: 1;
        text-align: right;
      }

      .title {
        font-weight: bold;
        display: inline-block;
        font-size: 14px;
        text-decoration: none;
        padding: 8px 10px 8px 4px;
        color: #000;
        vertical-align: top;
      }

      a.login {
        padding: 10px;
        display: inline-block;
        font-size: 11px;
        text-transform: uppercase;
        text-decoration: none;
        color: #000;
      }

      .login:hover {
        color: #fff;
      }

      .nav {
        display: inline-block;
        vertical-align: top;
      }

      @media (max-width: 750px) {
        .title {
          font-size: 16px;
          padding-bottom: 0;
        }

        a.login {
          padding: 24px 10px 23px;
        }

        .nav {
          display: block;
        }
      }
    `}</style>
  </header>
)
